<template>
  <div class="carousel">
    <Icon
      v-if="imageList.length > showCount"
      class="icon"
      name="shangyibu"
      :class="{ enabled: showOffset > 0 }"
      @click.native="previous"
    />

    <div
      class="image-list"
      :class="{ showGap: imageList.length > showCount }"
      :ref="refId"
      :id="refId"
    >
      <div
        v-for="(item, index) in imageList.slice(
          showOffset,
          showOffset + showCount
        )"
        class="image-list-item"
        :key="item.pkid"
        :style="{ width: itemWidth + 'px' }"
        @click="clickImage(index)"
      >
        <el-image
          class="image"
          :src="item.imageSrc"
          fit="cover"
          :class="{
            active: currentIndex === index + showOffset
          }"
        />
      </div>
    </div>

    <Icon
      v-if="imageList.length > showCount"
      class="icon"
      name="xiayibu"
      :class="{
        enabled: showOffset + showCount < imageList.length
      }"
      @click.native="next"
    />
  </div>
</template>

<script>
import Icon from '@/components/icon'

export default {
  name: 'Carousel',
  props: {
    refId: {
      type: String,
      required: true
    },
    showCount: {
      type: Number,
      default: 3,
      required: false,
      validator: (value) => value > 0
    },
    imageList: {
      type: Array,
      required: true
    },
    initialIndex: {
      type: Number,
      default: 0,
      required: false
    }
  },
  components: {
    Icon
  },
  data() {
    return {
      showOffset: 0,
      itemWidth: 0,
      currentIndex: 0
    }
  },
  mounted() {
    this.calculateSize()
    this.currentIndex = this.initialIndex

    this.calculateOffset()
  },
  methods: {
    calculateSize() {
      const ref = this.$refs[this.refId]
      if (ref && ref.clientWidth) {
        console.log(this.refId, ref.clientWidth)
        this.itemWidth =
          (ref.clientWidth - (this.showCount - 1) * 12) /
          this.showCount
      }
    },
    calculateOffset() {
      if (this.currentIndex > this.showCount - 1) {
        this.showOffset =
          this.currentIndex - (this.showCount - 1)
      }
    },
    previous() {
      if (this.showOffset > 0) {
        this.showOffset -= 1
      }
    },
    next() {
      if (
        this.showOffset + this.showCount <
        this.imageList.length
      ) {
        this.showOffset += 1
      }
    },
    clickImage(index) {
      this.currentIndex = index + this.showOffset
      this.$emit('index-change', this.currentIndex)
      this.$nextTick(() => {
        this.calculateSize()
      })
    }
  },
  watch: {
    imageList() {
      this.calculateSize()
    },
    initialIndex(val) {
      this.currentIndex = val
    }
  }
}
</script>

<style lang="scss" scoped>
.carousel {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;

  .icon {
    cursor: not-allowed;

    &.enabled {
      color: #00baff;
      cursor: pointer;
    }
  }

  .image-list {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    height: 100%;
    overflow: hidden;

    &.showGap {
      margin: 0 10px;
    }

    &-item {
      width: 100px;
      height: 100%;
      cursor: pointer;

      &:not(:last-of-type) {
        margin-right: 12px;
      }

      .image {
        width: 100%;
        height: 100%;
        box-sizing: border-box;

        &.active {
          border: 2px solid #2e97d3;
        }
      }
    }
  }
}
</style>
